<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="商品名称" prop="name" style="width: 30%;">
        <el-input v-model="form.name" placeholder="请输入商品名称"/>
      </el-form-item>
      <el-form-item label="logo" prop="logo">
        <image-upload v-model="form.logo" :limit="1"/>
      </el-form-item>
      <el-form-item label="简介" prop="introduction" >
        <editor v-model="form.introduction" :min-height="192"/>
      </el-form-item>
      <el-form-item label="划线价" prop="crossedPrice" style="width: 30%;">
        <el-input v-model.number="form.crossedPrice" placeholder="请输入划线价" type="number" step="0.01">
          <template slot="prepend">¥</template>
        </el-input>
      </el-form-item>
      <el-form-item label="平台价" prop="platformPrice" style="width: 30%;">
        <el-input v-model.number="form.platformPrice" placeholder="请输入平台价" type="number" step="0.01">
          <template slot="prepend">¥</template>
        </el-input>
      </el-form-item>
      <el-form-item label="运营状态" prop="status" >
        <el-select v-model="form.status" placeholder="请选择运营状态">
          <el-option label="已上线" value="online"/>
          <el-option label="已下线" value="offline"/>
          <el-option label="待上线" value="prepare"/>
        </el-select>
      </el-form-item>
      <el-form-item label="销量" prop="saleQuantity" style="width: 20%;">
        <el-input v-model.number="form.saleQuantity" placeholder="请输入销量" type="number"/>
      </el-form-item>
      <el-form-item label="标签" prop="label" style="width: 30%;">
        <el-input v-model="form.label" placeholder="请输入标签，最多三个，以逗号隔开"/>
      </el-form-item>
      <el-form-item label="库存" prop="stock" style="width: 20%;">
        <el-input v-model.number="form.stock" placeholder="请输入库存" type="number"/>
      </el-form-item>
      <el-form-item label="删除标识" prop="delFlag" style="width: 40%;">
        <el-select v-model="form.delFlag" placeholder="请选择删除状态">
          <el-option label="未删除" :value="0"/>
          <el-option label="已删除" :value="1"/>
        </el-select>
      </el-form-item>

      <el-form-item label="排序权重" prop="weight" style="width: 20%;">
        <el-input v-model.number="form.weight" placeholder="请输入排序权重，从大到小排序" type="number"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getGoods, addGoods, updateGoods } from "@/api/cms/goods";
import ImageUpload from "@/components/ImageUpload";
import Editor from "@/components/Editor";

export default {
  name: "GoodsEdit",
  components: {
    ImageUpload,
    Editor
  },
  data() {
    return {
      // 表单参数
      form: {
        status: "online",
        delFlag: "0"
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: "商品名称不能为空", trigger: "blur" }
        ],
        crossedPrice: [
          { required: true, message: "划线价不能为空", trigger: "blur" },
          { type: "number", message: "划线价必须为数字值", trigger: "blur" }
        ],
        platformPrice: [
          { required: true, message: "平台价不能为空", trigger: "blur" },
          { type: "number", message: "平台价必须为数字值", trigger: "blur" }
        ],
        status: [
          { required: true, message: "运营状态不能为空", trigger: "change" }
        ],
        saleQuantity: [
          { required: true, message: "销量不能为空", trigger: "blur" },
          { type: "integer", message: "销量必须为整数", trigger: "blur" }
        ],
        stock: [
          { required: true, message: "库存不能为空", trigger: "blur" },
          { type: "integer", message: "库存必须为整数", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    const id = this.$route.params && this.$route.params.id;
    if (id) {
      getGoods(id).then(response => {
        this.form = response.data;
      });
    }
  },
  methods: {
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateGoods(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.close();
            });
          } else {
            addGoods(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.close();
            });
          }
        }
      });
    },
    // 关闭页面
    close() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({ path: "/goods/list" });
    },
    // 取消按钮
    cancel() {
      this.close();
    }
  }
};
</script>
